<template>
  <div class="box">
    <!-- <div class="head">
        <img src="./img/b9.png" class="head-img">
        <span class="head-tit">奖品管理</span>
    </div> -->
    <div class="list-box">
      <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
        <div>
          <div v-if="arr===false||arr==''">
            <li class="list_wu">
                <img src="./img/back.png" alt="">
            </li>
          </div>
          <div v-else>
            <a href="http://dev.hybrid.u76ho.com/#/eleven?prizeid=1">

              <div class="list" v-for="(item,index) in this.arr" :key="index">
                  <img :src="item.prize_image" class="list-img">
                  <span class="list-name">{{item.prize_name}}</span>
                  <div v-if="item.num==null"><span class="list-count">购买数量：0</span></div>
                  <div v-else><span class="list-count">购买数量：{{item.num.prize_num}}</span></div>
                  <span class="list-price">价值：{{item.prize_money}}</span>
                  <span class="list-num">{{item.ReceivePrize}}</span>
                  <span class="list-peo">人</span>
                  <span class="list-wz">领取</span>
              </div>

            </a>
          </div>
        </div>
      </pull-to>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
        page:1,
          arr:{ },
          token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    getData(){
      var url=this.token+'/adv/prize';
      var obj={
        user_id:this.$route.query.userid
      }
      //alert(obj.user_id)
      var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    refresh(loaded) {
      setTimeout(() => {
        this.getData();
      //  this.dataList.reverse();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {

        this.page++;
        var url=this.token+"/adv/prize?page="+this.page;
        // alert(url);

        var obj={
          user_id:this.$route.query.userid
        }
        var thet=this;
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {

              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  width:100%;
  height:100%;
  position:fixed;
  background:rgb(247,247,247);
}
a{
  text-decoration:none;
}

.list-box{
  width:100%;
  height:100%;
  //margin-top:0.64rem;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: scroll;
}
.list{
  width:3.42rem;
  height:0.8rem;
  background-image:url("./img/bg.png");
  background-repeat: no-repeat;
  background-size:100% 100%;
  margin-top: 0.08rem;
  border-radius:0.05rem;
  position: relative;
  z-index: 1;
  .list-img{
    width:0.48rem;
    height:0.48rem;
    position: absolute;
    top:0.16rem;
    left:0.11rem;
    border-radius:0.05rem;
    pointer-events: none;
    vertical-align: sub;
  }
  .list-name{
    color:#1B1B1B;
    font-size:0.14rem;
    font-weight: bold;
    position:absolute;
    top:0.24rem;
    left:0.7rem;
  }
  .list-count{
    color:#939393;
    font-size: 0.11rem;
    position:absolute;
    top:0.48rem;
    left:0.71rem;
  }
  .list-price{
    color:#939393;
    font-size: 0.11rem;
    position:absolute;
    top:0.48rem;
    left:1.58rem;
  }
  .list-num{
    color:#FF6C2B;
    font-size: 0.25rem;
    position:absolute;
    top:0.25rem;
    left:2.83rem;
  }
  .list-peo{
    color:#FF6C2B;
    font-size:0.12rem;
    position:absolute;
    top:0.33rem;
    left:3.13rem;
  }
  .list-wz{
    color:#939393;
    font-size:0.1rem;
    position:absolute;
    top:0.51rem;
    left:2.93rem;
  }
}
.list:nth-last-child(1){
  margin-bottom:0.75rem;
}
.list_wu{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  img{
    width:2rem;
    height:0.9rem;
    margin-top:48%;
  }
}
</style>
